<template>
  <div>
    <Card class="formCard">
      <Row gutter="40">
        <i-col span="6">
          <DatePicker
            v-model="messageForm.date"
            type="month"
            placeholder="统计年月"
            :editable="false"
            style="width:100%"
            @on-change="dateChange"
          ></DatePicker>
        </i-col>
        <i-col span="6">
          <Cascader change-on-select :data="reagentOrganizationList" v-model="messageForm.reagentOrganization" @on-change="organizationChange" placeholder="续期专员机构" clearable></Cascader>
        </i-col>
        <i-col span="6">
          <Select v-model="messageForm.reagentName" placeholder="续期专员姓名" clearable multiple>
            <Option
              v-for="item in reagentNameList"
              :key="item.key"
              :value="item.key"
            >{{item.value}}-{{item.key}}</Option>
          </Select>
        </i-col>
      </Row>
      <Row gutter="40" style="margin-top:20px;">
        <i-col span="6">
          <Button
            type="primary"
            class="paddingButton"
            @click="handleSubmit(0)"
            :loading="querySubmit"
          >查询</Button>
          <Button type="default" class="paddingButton" @click="handleReset()">重置</Button>
        </i-col>
      </Row>
      <Button type="primary" @click="info" v-if="false"></Button>
    </Card>
    <div :class="minHeight==true?'minheight':''" ref="tableCardHeight">
      <Card class="tableCard">
        <Table :columns="messageColumns" :data="messageData">
          <template slot-scope="{row}" slot="restCount">
            <span v-if="row.restCount<= 0">
              <span style="color:red">{{row.restCount}}</span>
            </span>
            <span v-else>{{row.restCount}}</span>
          </template>
          <template slot-scope="{row}" slot="operate">
            <Button type="primary" @click="messageModalShow(row)">增加条数</Button>
          </template>
        </Table>
        <!-- 分页 -->
        <Row>
          <i-col span="24" style="text-align:right;margin-top:20px;margin-bottom:40px;">
            <Page
              :total="total"
              show-total
              show-sizer
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              :page-size-opts="pageSizeOptions"
            />
          </i-col>
        </Row>
        <Modal
          footer-hide="true"
          :value="messageModal"
          :mask-closable="false"
          @on-visible-change="visibleChagne"
          width="414"
        >
          <span slot="header" style="color:#fff;font-size:14px">增加条数</span>
          <div style="text-align:center">
            <div>已配置短信数量：{{row.msgCount}}条</div>
            <div class="marginDiv">已新增短信数量：{{row.addCount}}条</div>
            <div style="color: rgba(166, 166, 166, 1);">共计：{{row.msgCount+row.addCount}}条</div>
            <div class="marginDiv">
              新增数量：
              <Input v-model="addMessageCount" placeholder="输入新增短信数量" style="width:50%" />
            </div>
          </div>
          <div style="text-align:right">
            <Button type="primary" @click="add()">确定</Button>
            <Button type="primary" style="margin-right:20px" @click="cancel">取消</Button>
          </div>
        </Modal>
      </Card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageForm: {
        date: null,
        reagentOrganization: [],
        reagentName: null
      },
      // 续期专员机构
      reagentOrganizationList: [],
      // 续期专员姓名
      reagentNameList: [],
      //表格数据
      messageColumns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "统计年月",
          key: "analysisDates",
          align: "center",
          width: 110
        },
        {
          title: "续期专员机构",
          key: "manageCom",
          align: "center",
          width: 120
        },
        {
          title: "员工工号",
          key: "agentCode",
          align: "center",
          width: 110
        },
        {
          title: "续期专员姓名",
          key: "agentName",
          align: "center",
          width: 120
        },
        {
          title: "本月配置",
          key: "msgCount",
          align: "center",
          width: 110
        },
        {
          title: "增加",
          key: "addCount",
          align: "center",
          width: 80
        },
        {
          title: "共计已用",
          key: "useCount",
          align: "center",
          width: 110
        },
        {
          title: "剩余",
          key: "restCount",
          align: "center",
          slot: "restCount",
          width: 80
        },
        {
          title: "增加已用",
          key: "costCount",
          align: "center",
          width: 110
        },
        {
          title: "操作",
          key: "operate",
          align: "center",
          slot: "operate"
        }
      ],
      messageData: [],
      // 分页数据
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pageObj: null,
      pageSizeOptions: [5, 10, 15, 20],
      // modal
      messageModal: false,
      addMessageCount: null,
      row: "",
      minHeight: false,
      querySubmit: false
    };
  },
  methods: {
    // 重置
    handleReset() {
      this.messageForm = {
        date: null,
        reagentOrganization: [],
        reagentName: null
      };
      this.isDisabled = false;
    },
    // 短信配置查询
    handleSubmit(t) {
      if (t != 1) {
        this.querySubmit = true;
      }
      let currentDate;
      if (this.messageForm.date == "") {
        let d = new Date();
        let year = d.getFullYear();
        let month = d.getMonth() + 1;
        if(month<10){
          month = '0' + month;
        }
        currentDate = String(year) + month;
      } else {
        currentDate = this.messageForm.date;
      }

      let obj = {
        agentName: this.messageForm.reagentName,
        analysisDates: currentDate,
        index: this.index,
        manageCom: this.messageForm.reagentOrganization[this.messageForm.reagentOrganization.length-1] || '',
        pageSize: this.pageSize
      };
      this.pageObj = obj;
      //console.log(obj);
      this.api.getByConditions(obj).then(res => {
        if (res.code == 200) {
          this.messageData = res.data.data;
          this.total = res.data.total;
          if (t == 0) {
            this.info(res.msg);
          }
          this.querySubmit = false;
          //console.log(this.messageData)
        } else {
          this.querySubmit = false;
          this.messageData = [];
          this.info(res.msg);
        }
      });
    },
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.getByConditions(this.pageObj).then(res => {
        this.messageData = null;
        if (res.code == 200) {
          this.messageData = res.data.data;
          this.total = res.data.total;
          //this.info(res.msg);
          //console.log(this.messageData)
        } else {
          this.messageData = [];
          this.info(res.msg);
        }
      });
    },
    info(tip) {
      this.$Message.info(tip);
    },
    dateChange(e) {
      this.messageForm.date = e.substr(0, 4) + e.substr(5, 7);
      // console.log(this.messageForm.date);
    },
    // 工作统计下拉框信息
    getProfessionalList() {
      // this.api.selectUerList().then(res => {
      //   if (res.code == 200 && res.data != null) {
      //     this.reagentOrganizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.reagentOrganizationList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.reagentOrganizationList = arr
        } else {
          this.reagentOrganizationList = [];
        }
      });
    },
    // 根据管理机构查询员工
    organizationChange(value) {
      //console.log(value);
      if (!value) {
        this.reagentNameList = [];
      } else {
        $.ajax("scrm-gateway/scrm-uer/api/List/sekectreangencode/" + value[value.length-1], {
          method: "get",
          contentType: "application/json;charset=utf-8",
          headers: {
            Authorization: sessionStorage.getItem("credentials")
          },
          success: res => {
            //console.log(res.data);
            if (res.code == 200 && res.data != null) {
              this.reagentNameList = res.data;
            } else {
              this.reagentNameList = [];
            }
          },
          error: res => {
            // console.log(res);
            this.info(res.msg);
          }
        });
      }
    },
    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },
    messageModalShow(row) {
      this.messageModal = true;
      this.row = row;
    },
    visibleChagne(value) {
      if (value == false) {
        this.messageModal = false;
      }
    },
    cancel() {
      this.addMessageCount = "";
      this.messageModal = false;
    },
    adjustHeight() {
      if (this.$refs.tableCardHeight.scrollHeight < 450) {
        this.minHeight = true;
      }
      //console.log(this.minHeight)
    },
    add() {
      let currentCode = sessionStorage.getItem("useragentcode");
      let obj = {
        addCount: this.addMessageCount,
        agentCode: this.row.agentCode,
        analysisDates: this.row.analysisDates,
        manageCom: this.row.manageCom,
        operator: currentCode,
        orgMsgCount: this.row.msgCount
      };
      //console.log(obj)
      this.api.insertOneRecord(obj).then(res => {
        if (res.code == 200) {
          this.messageModal = false;
          this.addMessageCount = "";
          this.info(res.msg);
          this.handleSubmit(1);
        } else {
          this.error("只能输入正整数");
        }
        //console.log(res);
      });
    }
  },
  mounted() {
    this.adjustHeight();
    this.handleSubmit(2);
    this.getProfessionalList();
  }
};
</script>
<style scoped lang="less">
@import "./index";
</style>

<style>
.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
</style>